<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgba(0, 255, 255, 0.253);
        }

        ul {
            background: url(./img/gang.png) no-repeat;
            background-size: 1022px 500px;
            height: 500px;
            width: 900px;
            margin: 50px auto;
            display: flex;
        }

        ul>li {
            height: 500px;
            width: 113px;
            /* border: 1px solid red; */
        }
    </style>

<body>
    <ul>
        <li><audio src="./notes/1.oga"></audio></li>
        <li><audio src="./notes/2.oga"></audio></li>
        <li><audio src="./notes/3.oga"></audio></li>
        <li><audio src="./notes/4.oga"></audio></li>
        <li><audio src="./notes/5.oga"></audio></li>
        <li><audio src="./notes/6.oga"></audio></li>
        <li><audio src="./notes/7.oga"></audio></li>
        <li><audio src="./notes/8.oga"></audio></li>
        <li><audio src="./notes/9.oga"></audio></li>
    </ul>
    <script>
        //获取元素
        let ul = document.querySelector("ul");
        let lis = document.querySelectorAll("ul>li");
        let audios = document.querySelectorAll("ul>li>audio");

        // 循环添加点击事件
        // for(let i =0 ;i<lis.length;i++){
        //     lis[i].onclick = function (){
        //         audios[i].play()
        //     }
        // }

        //键盘事件 e.keyCode
        window.onkeydown = function (e) {
            if (e.keyCode == 65) {
                //a
                audios[0].load();
                audios[0].play();

            }
            if (e.keyCode == 83) {
                //s
                audios[1].load();
                audios[1].play();

            }
            if (e.keyCode == 68) {
                //d
                audios[2].load();
                audios[2].play();

            }
            if (e.keyCode == 70) {
                //f
                audios[3].load();
                audios[3].play();

            }
            if (e.keyCode == 71) {
                //g
                audios[4].load();
                audios[4].play();

            }
            if (e.keyCode == 72) {
                //h
                audios[5].load();
                audios[5].play();

            }
            if (e.keyCode == 74) {
                //j
                audios[6].load();
                audios[6].play();

            }
            if (e.keyCode == 75) {
                //k
                audios[7].load();
                audios[7].play();

            }
            if (e.keyCode == 76) {
                //l
                audios[8].load();
                audios[8].play();

            }
        };
    </script>
</body>

</html>